<template>

  <div class="element-statistics-box">
      <div class="fixed-box">
         <div class="content-box">
            <div class="title-left">
                菜谱
            </div>
            <div class="time-right">
                <div class="tag-left">
                    营养周报
                </div>
                <div class="tag-right">
                  <span class="select">周</span>
                  <span>月</span>
                  <span>年</span>
                </div>
            </div>
         </div>
      </div>
      <div style="width: 100%;height: 40px;">

      </div>

      <div class="all-bg">
          <van-loading size="36" color="#fbd9b6" />
          <div style="color: #fbd9b6; font-size: 12px;">加载中...</div>
      </div>


      <!--时间选择开始-->
      <div class="time-border-box">
          <div class="select-time-flex">
            <div class="left">
              <span class="time" style="padding-left: 12px;">2020-10-18</span>
              <span class="time">~</span>
              <span class="time">2020-10-18</span>
              <span class="iconfont icon-daosanjiao"></span>
            </div>
            <div class="right">
               <span class="iconfont icon-shu"></span>
               <span class="list-name">列表</span>
            </div>
          </div>
      </div>
      <!--时间选择结束-->


      <!-- 学校和学生总数 -->
      <div class="summary-num-box">
         <div class="summary-item">
            <span class="summary-name">上线学校总量:</span>
            <span class="summary-num">520所</span>
         </div>
         <div class="summary-item">
            <span class="summary-name">监测学生:</span>
            <span class="summary-num">100020名</span>
         </div>
      </div>
       <!-- 学校和学生总数end -->

     <!-- <div class="city-select-box">
         <div class="city-flex">
           <div class="city-item"  v-for="(item,index) in cityList"
            :class="cityId == item.id?'city-action':''" @click="citySelect(item)"
          >{{item.name}}</div>
         </div>

         <div class="region-box">
            <div class="city-flex">
              <div class="city-item" v-for="(item,index) in regionList"
            :class="regionId == item.id?'city-action':''"  @click="regionSelect(item)">{{item.name}}</div>
            </div>
         </div>
        <div class="ok-btn">
          确认
        </div>
      </div> -->


     <!-- <div style="margin-top: 10px;background-color: #FFFFFF;" v-if="heat_data !=null">
        <gu_pir :heat_data="heat_data" ref="pir"></gu_pir>
      </div> -->

     <div>
        <ck_pie_summary ref="summary" :data="data" :color="colro1"
          name="学生在校营养健康统计" :is_click="false"
        ></ck_pie_summary>
      </div>

      <div>
         <ck_pie_summary ref="summary2" :data="data2" :color="color2"
           name="ccccc" :is_click="false"
         ></ck_pie_summary>
       </div>


      <van-popup v-model="timeShow"
      position="bottom"
      :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="timeConfirm"
          @cancel="timeCancel"
        />
      </van-popup>

  </div>

</template>

<script>
  import Vue from 'vue';
  import { DatetimePicker ,Popup,Loading  } from 'vant';
  Vue.use(DatetimePicker).use(Popup).use(Loading);
  import gu_pir from "./gu_pir.vue"
  import ck_pie_summary from "./ck_pie_summary.vue"
  export default{
    name:"element_statistics",
    data(){
      return{
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        timeShow:false,
        cityId:"all",
        regionId:"all",
        cityList:[{id:"all",name:"全部"},{id:1,name:"南宁"},{id:2,name:"柳州"}],
        regionList:[{id:"all",name:"全部"},{id:5,name:"青秀区"},{id:6,name:"西乡塘区"},
        {id:7,name:"兴宁区"}],
        data:[{
            value: "0.12",
            name: '偏高',
            type:1,
            },
            {
            value: "0.25",
            name: 'SSD',
            name: '适中',
            type:2,
            },
            {
            value: "0.02",
            name: 'U盘',
            name: '偏低',
            type:3,
            }
        ],
        data2:[],
        color2:['#ef856d','#a7ce95','#fbd9b6',"#ff0000"],
        colro1:['#ef856d','#a7ce95','#fbd9b6'],
        heat_data:{
          company:"千卡",//单位
          list:[ //早中晚餐数据列表
            {
              value:1040,
              name:"早餐",
              status:"3",//1 2 3 低  适中  高
              recommend:"900 ~ 960"
            },
            {
              value:940,
              name:"中餐",
              status:"1",//1 2 3 低  适中  高
              recommend:"920 ~ 960"
            },
            {
              value:1140,
              name:"晚餐",
              status:"2",//1 2 3 低  适中  高
              recommend:"1100 ~ 1160"
            },
            {
              value:540,
              name:"加餐",
              status:"2",//1 2 3 低  适中  高
              recommend:"520 ~ 560"
            }
          ],
          total_heat:{value:3540,name:"总摄入",status:"1",recommend:"3600 ~ 3800"}
        }
      }
    },
    methods:{
      //地区选择
      regionSelect(item){
        this.regionId = item.id
      },
      //城市选择
      citySelect(item){
        this.cityId = item.id
      },

      timeConfirm(ev){
        console.log(ev)
      },
      timeCancel(){

      },
      pirNameClick(item){
        console.log(item)
      }
    },
    mounted(){
     // this.$refs.pir.initECharts()

    },
    created() {
      this.$nextTick(()=>{
        this.$refs.summary.initECharts()
        this.$refs.summary2.initECharts()
      })
    },
    components:{
      gu_pir,ck_pie_summary
    }
  }

</script>

<style lang="stylus">
  *{
    margin:0;
    padding:0;
  }
  html{
    background: #f1f1f1;
  }
  body{
    background: #f1f1f1;
  }
  .all-bg{
    position fixed;
    left 0;
    right 0;
    bottom 0;
    top 0;
    width 100%;
    height 100%;
    background rgba(0,0,0,0.8)
  }
  /* 城市选择开始*/
  .city-select-box{
     width:100%;
     height:calc(100% - 45px);
     position:fixed;
     left:0;
     right:0;
     top:45px;
     bottom:0;
     background:#FFFFFF;
     .city-flex{
       width:100%;
       display:flex;
       justify-content:flex-start;
       align-items:center;
       flex-wrap:wrap;
       border-left:1px solid #f1f1f1;
       border-top:1px solid #f1f1f1;
       box-sizing:border-box;
       .city-item{
         width:20%;
         max-width:20%;
         min-width:20%;
         flex-grow:1;
         height:46px;
         background:#FFFFFF;
         text-align:center;
         line-height:46px;
         color:#717171;
         font-size:10px;
         box-sizing:border-box;
         border-bottom:1px solid #f1f1f1;
         border-right:1px solid #f1f1f1;
       }
       .city-action{
         color:#FFFFFF;
         background:#fcb251;
       }
     }
     .region-box{
       border-top:10px solid #f7f8f8;
     }
     .ok-btn{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        height:50px;
        line-height:50px;
        text-align:center;
        color:#FFFFFF;
        font-size:16px;
        background:#fcb251;
      }
  }
  /* 城市选择结束*/


  // 时间选择css
  .time-border-box{
    width:100%;
    background:#FFFFFF;
    padding:10px 0;
    .select-time-flex{
      height:28px;
      width:100%;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      border-left:8px solid #fcb251;
      line-height:28px;
      box-sizing:border-box;
      .left{
          flex-grow:1;
          .time{
            color:#717171;
            font-size:12px;
          }
          .iconfont{
            font-size:14px;
            color:#fcb251;
          }
      }
      .right{
        flex-grow:1;
        text-align:right;
        .iconfont{
          font-size:16px;
          color:#fcb251;
        }
        .list-name{
          color:#717171;
          font-size:12px;
          padding-right:20px;
          vertical-align:middle;
        }
      }
    }
  }
  // 时间选择css end


/* 学生数量监测开始 */
  .summary-num-box{
    width:100%;
    background:#FFFFFF;
    padding:16px 20px;
    box-sizing:border-box;
    border-bottom:1px solid #f7f7f7;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    .summary-item{
      width:50%;
      flex-grow:1;
      line-height:1.5;
      .summary-name{
        font-size:12px;
        color:#717171;
      }
      .summary-num{
        font-size:16px;
        color:#fcb253;
        font-weight:bold;
      }
    }
  }
/* 学生数量监测开始end */


  .element-statistics-box{
    width:100%;
    padding:0;
    box-sizing:border-box;
    .fixed-box{
      position:fixed;
      top:0;
      left:0;
      right:0;
      width:100%;
      height:40px;
      background: #2f2643;
      .content-box{
        width:100%;
        height:20px;
        margin-top:10px;
        line-height:20px;
        .title-left{
          width:72px;
          box-sizing:border-box;
          padding-left:14px;
          color:#d1bcff;
          font-size:12px;
          border-right:2px dotted #9484b3;
          float:left;
          height:20px;
        }
        .time-right{
          width:calc(100% - 72px);
          float:left;
          height:20px;
          font-size:12px;
          .tag-left{
            float:left;
            color:#feb942;
            font-weight:bold;
            padding-left:32px;
          }
          .tag-right{
            float:right;
            span{
              color:#d1bcff;
              margin-right:42px;
            }
            span:nth-of-type(3){
              margin-right:24px;
            }
            .select{
              padding:4px 4px;
              color:#feb942;
              background-color:#120f22;
              border-radius:4px 4px;
            }
          }
        }
      }
    }
  }
</style>
